<style lang="sass">
    @import "../../style/config.scss";
    .lt-sign {        
        input,button {width:100%;}
        input {height:2rem;}
        button {margin-top:.5rem;}
        a {color:#999;}
        a:hover {color:$color-theme;}
        .btn {margin-top:.5rem;}
        .sign-in {
            width:310px; margin:4rem auto;
        }     
    }
</style>

<template>
    <section class="lt-main-frame lt-lottery">
        <div class="lt-main-structure">
            <div class="lt-sign">
                <el-form class="sign-in" ref="form"  :model="form" :rules="rules" label-width="70px">
                    <el-form-item label="用户名" prop="username">
                        <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码" v-if="type=='signup'" prop="password2">
                        <el-input type="password" placeholder="请重复输入密码" v-model="form.password2"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" v-if="type=='signup'" prop="code">
                        <div class="hm-flex">
                            <div class="hm-flex-4"><el-input type="text" placeholder="请输入验证码" v-model="form.code"></el-input></div>
                            <div class="hm-flex-3 hm-flex-c"><img v-if="imgVerify" :src="imgVerify" @click="imgVerifyLoad" style="width:90%; margin-left:10%; vertical-align:middle;"></div>
                        </div>                        
                    </el-form-item>
                    <el-form-item label="推荐人" v-if="type=='signup'">
                        <el-input type="password" placeholder="请输入推荐人号码" v-model="form.higher"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="danger" size="large" :loading="loading" @click="submit">登录</el-button>
                        <div class="btn">
                            <a @click="typeChange('signin')" v-if="type=='signup'">已有帐号？直接登录</a>
                            <a @click="typeChange('signup')" v-else>免费开户</a>
                        </div>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </section>
</template>

<script>


export default {
    data (){
        return {
            form : {
                username  : '',
                password  : '',
                password2 : '',
                higher    : '',
                code      : '',
            },
            type : 'signin',
            loading : false,
            imgVerify : '',
            imgVerifyKey : '',
            rules : {
                username : [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 4, max: 32, message: '长度在 4 到 32 个字符', trigger: 'blur' },
                    {validator:(rule, value, callback)=>{

                        if(/^[a-zA-Z]\w{3,31}$/.test(this.form.username)){
                            callback()
                        }else{
                            callback(new Error('用户名必须以字母开头'))
                        }                            
                    },trigger: 'blur'}
                ],
                password : [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
                ],
                password2 : [
                    { required: true, message: '请重复输入密码', trigger: 'blur' },
                    { validator:(rule, value, callback)=>{

                        if(this.form.password===value){
                            callback()
                        }else{
                            callback(new Error('两次输入的密码不相同'))
                        }
                        console.log(this.form.password,value)                        
                    }, trigger: 'blur' }
                ],
                code : [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min: 6, max: 6, message: '长度在 6 到 6 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    computed: {

    },
    methods: {
        submit(){            
            if(this.type=="signin"){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.$root.ajax({
                            url     : 'user/sign/in',
                            type    : 'post',
                            params  :  {
                                username : this.form.username,
                                password : this.form.password,
                                code     : this.form.code,
                            }
                        },(ret,err)=>{
                            this.loading = false
                            if(ret){
                                this.login()                                
                            }else{
                                this.$notify.error({title:'失败',message:err.msg})
                            }
                        })
                    }
                }) 
            }else if(this.type=="signup"){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.$root.ajax({
                            url     : 'lottery/account/apply',
                            type    : 'post',
                            headers :{
                                verify : this.imgVerifyKey,
                            },
                            params  :  {
                                username  : this.form.username,
                                password  : this.form.password,
                                password2 : this.form.password2,
                                higher    : this.form.higher,
                                code      : this.form.code,
                            }
                        },(ret,err)=>{
                            this.loading = false
                            if(ret){
                                this.login()                                
                            }else{
                                this.imgVerifyLoad()
                                this.$notify.error({title:'失败',message:err.msg})
                            }
                        })
                    }
                }) 
            } 
        },
        typeChange(type='signin'){
            Object.assign(this.$data.form,this.$options.data().form)
            this.$refs['form'].resetFields()
            this.type = type
            if(type=='signup'){
                this.imgVerifyLoad()
            }
        },
        imgVerifyLoad(){
            this.imgVerify = ''
            this.$root.ajax({
                url     : 'user/auth/verify?type=json&tag=signup',
            },(ret,err)=>{
                this.imgVerifyKey =  ret.data.key
                this.imgVerify = 'data:image/jpg;base64,' + ret.data.imgCode
            })
        },
        login() {
            this.$root.ajax({
                url     : 'lottery/index/data',
                type    : 'get',
                loading : 1,
            },(ret,err)=>{
                this.$store.commit('BASE_UPDATE',{
                    key : 'init',
                    val : true
                })
                if(ret){
                    this.$store.commit('BASE_UPDATE',{
                        key : 'user',
                        val : ret.data.user
                    })
                    this.$store.commit('BASE_UPDATE',{
                        key : 'games',
                        val : ret.data.games
                    })
                    this.$notify.success({title:'成功',message:ret.msg})
                    this.$router.replace({name:'index'})
                }
                if(err && err.error == 404){
                    this.$notify.error({title:'失败',message:err.msg})
                }
            }) 
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.typeChange()
        })
    }
}
</script>